<template>
  <div class="table">
    <div class="box">
      {{ a + b }}
    </div>
    <div class="box">
      {{ a + b }}
    </div>
    <div class="box">
      {{ a + b }}
    </div>
    <div class="box">
      {{ a + b }}
    </div>
    <div class="box">
      {{ a + b }}
    </div>
    <div class="box">
      {{ a + b }}
    </div>
    <div class="box">
      {{ a + b }}
    </div>
  </div>
  <div>
    <button @click="add">添加</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      a: 1,
      b: 2
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
      this.a++
      //Ax = b
    }
  }
}
</script>
<style type="text/css">
.table {
  display: grid;
  grid-template-rows: repeat(auto, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 0;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  //animation: move 0.5s linear forwards;
}
@keyframes move {
  0 {
    transform: rotate(0deg) translate(0px);
  }
  100% {
    transform: rotate(30deg) translate(100px);
  }
}
</style>
